<template>
  <view class="cu-card">
    <view class="cu-item padding-sm">
      <text class="text-lg padding-xs">
        {{ details.name }}
      </text>
      <view class="text-sm text-grey padding-xs">
        <text>{{ details.code }}</text>
      </view>
      <view class="detail-flex padding-xs">
        <view>
          <view
            class="text-xxl"
            :class="details.lastYearGrowth >= 0 ? 'text-red' : 'text-green'"
          >
            {{ details.lastYearGrowth > 0 ? "+" : "" }}
            {{ details.lastYearGrowth }}%
          </view>
          <view class="text-gray text-sm">近一年涨跌幅</view>
        </view>
        <view>
          <view :class="details.dayGrowth >= 0 ? 'text-red' : 'text-green'">
            {{ details.dayGrowth > 0 ? "+" : "" }}
            {{ details.dayGrowth }}%
          </view>
          <view class="text-gray text-sm">日涨跌幅</view>
        </view>
        <view>
          <view>{{ details.netWorth }}</view>
          <view class="text-gray text-sm"
            >净值 {{ details.netWorthDate.slice(-5) }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      details: {
        netWorthDate: "",
      },
    };
  },
  onLoad(option) {
    console.log(JSON.parse(option.item));
    this.details = JSON.parse(option.item);
  },
  methods: {},
};
</script>

<style>
.detail-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-right: 20px;
}
</style>
